<template>
  <div>
    <div class="main">
      <div class="top">
        <span>欢迎来到爱家商城&nbsp;
          <router-link to="/login" style="color: red;" v-if="!user">[登录]</router-link>
          <span style="color: red;" v-if="user">{{username}}<a style="color: blue;" @click="quit">[退出登录]</a></span>
        </span>
        <span class="topRight">
          <router-link to="/userMember" style="color:limegreen">我的爱家</router-link>&nbsp;|
          <router-link to="/cart" style="color:limegreen">我的订单</router-link>&nbsp;|
          <router-link to="/userMember" style="color:limegreen">会员中心</router-link>&nbsp;|
          <router-link to="/email" style="color:limegreen">联系我们</router-link>
        </span>
      </div>


      <div class="lsg">
        <h1 class="logo">
          <router-link to="/home"><img src="../../爱家商城/images/logo.jpg" width="217" height="90" /></router-link>
        </h1>
        <div class="subBox">
          <div>
            <input type="text" style="height: 32px;width: 250px;" v-model="query" />
            <button style="height: 35px;width: 50px;" @click="toQuery">搜索</button>
          </div>
        </div>
        <div class="gouwuche">
          <div class="gouCar">
            <img src="../../爱家商城/images/gouimg.png" width="19" height="20"
              style="position:relative;top:6px;" />&nbsp;|&nbsp;
            <strong class="red">{{inum}}</strong>&nbsp;件&nbsp;|
            <strong class="red">&yen; {{iprice}}</strong>
            <router-link to="/cart">&nbsp;结算</router-link> <img src="../../爱家商城/images/youjian.jpg" width="5"
              height="8" />
          </div>
          <div class="myChunlv">
            <router-link to="userMember"><img src="../../爱家商城/images/mychunlv.jpg" width="112" height="34" />
            </router-link>
          </div>
        </div>
      </div>
    </div>

    <div class="pnt">
      <div class="pntLeft">
        <h2 style="background-color:lawngreen;color: white;font-size: 20px;" align="center">所有商品分类</h2>
        <div class="one" v-for="(item , index) in itemCat" @mouseenter="enter(index)" @mouseleave="leave(index)">
          <a style="color: #00CC33;text-decoration: none;" @click="toItemCat(item)">
            {{item.name}}
          </a>
          <div class="two">
            <div class="two_s" v-if="item.status">
              <div class="three" v-for="items in item.children">
                <a style="color: #00CC33;text-decoration: none;" @click="toItemCat(items)">
                  {{items.name}}
                </a>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="pntRight">
        <span class="nav">
          <p class="navCur">
            <router-link to="/home" style="color: #00CC33;">商城首页</router-link>&nbsp;|
            <router-link to="/home" style="color: #00CC33;">促销中心</router-link>&nbsp;|
            <router-link to="/userMember" style="color: #00CC33;">会员中心</router-link>&nbsp;|
            <router-link to="/home" style="color: #00CC33;">帮助中心</router-link>
          </p>
        </span>
        <div id="lb">
          <template>
            <el-carousel indicator-position="outside">
              <el-carousel-item v-for="item in images">
                <img :src="item.img" />
              </el-carousel-item>
            </el-carousel>
          </template>
        </div>
      </div>
    </div>

    <div v-if="num==0">
      <div id="pagehome">
        <div class="tltleFU">
          <span :class="pagehomeOrshow ? 'tltleS':'titlef'" @click="pagehomeOrshow = 1">
            推荐购买
          </span>
          <span :class="!pagehomeOrshow ? 'tltleS':'titlef'" @click="pagehomeOrshow = 0">
            热门商品
          </span>
        </div>
        <div class="com flex" v-if="pagehomeOrshow == 1">
          <div class="imageFlex" @click="toItemDesc(item)" v-for="(item,index) in recommendList" :title='item.details'>
            <img :src="require(`../assets/images/${item.photoFile}`) ">
            <div id="ss">
              <img :src="require(`../assets/images/${item.photoFile}`)">
            </div>
            <div id="flexText" >
              <span>{{item.name}}</span>
              <span>价格￥{{item.price}}</span>
            </div>
          </div>
        </div>
        <div class="com flex" v-if="pagehomeOrshow == 0">
          <div class="imageFlex" @click="toItemDesc(em)" v-for="(em,index) in HotList" :title='em.details'>
            <img :src="require(`../assets/images/${em.photoFile}`) ">
            <div id="ss">
              <img :src="require(`../assets/images/${em.photoFile}`)">
            </div>
            <div id="flexText" >
              <span>{{em.name}}</span>
              <span>价格￥{{em.price}}</span>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div id="pagehome" v-if="num==1">
      <span style="color: cornflowerblue;font-size: 30px;border-bottom: 2px solid red;">
        搜索到以下商品
      </span>
      <div class="com flex" v-if="pagehomeOrshow == 1">
        <div class="imageFlex" @click="toItemDesc(item)" v-for="(item,index) in searchList" :title='item.details'>
          <img :src="require(`../assets/images/${item.photoFile}`) ">
          <div id="ss">
            <img :src="require(`../assets/images/${item.photoFile}`)">
          </div>
          <div id="flexText" >
            <span>{{item.name}}</span>
            <span>价格￥{{item.price}}</span>
          </div>
        </div>
      </div>
    </div>

  </div>
</template>

<script>
  export default {
    data() {
      return {
        query: "",
        num: 0,
        username: "",
        inum: 0,
        iprice: 0,
        HotList: {},
        itemCat: {},
        itemShow: false,
        images: [{
            img: require('../assets/images/ban1.jpg')
          },
          {
            img: require('../assets/images/ban2.jpg')
          },
          {
            img: require('../assets/images/ban3.jpg')
          },
          {
            img: require('../assets/images/ban4.jpg')
          },
          {
            img: require('../assets/images/ban5.jpg')
          }
        ],
        itemlist: {},
        photo: [],
        recommendList: [],
        user: JSON.parse(window.sessionStorage.getItem("rsp")),
        searchList: [],
        pagehomeOrshow:1
      }
    },
    created() {
      this.getLeft()
      this.getlist()
      this.abc()
      this.hot()
      this.showNumAndPrice()
      this.showUsername()
    },
    methods: {

      leave(ind) {
        this.itemCat[ind].status = false
      },
      enter(ind) {
        this.itemCat[ind].status = true
      },
      async getLeft() {
        let {
          data: rsp
        } = await this.$http.post("/aj-itemCat/getLeft")
        if (rsp === "失败") return alert('获取失败')
        this.itemCat = rsp
      },
      async getlist() {
        let {
          data: rsp
        } = await this.$http.post("/aj-item/findItemList")
        this.itemlist = rsp
      },
      async abc() {
        let {
          data: list
        } = await this.$http.post("/aj-item/recommendList")
        this.recommendList = list
      },
      async hot() {
        let {
          data: hotList
        } = await this.$http.post("/aj-item/HotList")
        this.HotList = hotList
      },
      toItemCat(item) {
        window.sessionStorage.setItem('itemSotr', JSON.stringify(item))
        this.$router.push('/itemSort')
      },
      toItemDesc(item) {
        window.sessionStorage.setItem('itemDesc', JSON.stringify(item))
        this.$router.push("/itemDesc")
      },
      async showNumAndPrice() {
        if (JSON.parse(window.sessionStorage.getItem("rsp"))) {
          let {
            data: rsp
          } = await this.$http.post("/aj-user/showNumAndPrice", JSON.parse(window.sessionStorage.getItem("rsp")))
          this.inum = rsp.num
          this.iprice = rsp.price
          if (rsp.length === 0) {
            this.inum = 0
            this.iprice = 0
          }
        }
      },
      showUsername() {
        if (JSON.parse(window.sessionStorage.getItem("rsp"))) {
          this.username = this.user.username
        }
      },
      quit() {
        window.sessionStorage.removeItem("rsp")
        window.location.reload()
      },
      async toQuery() {
        var query = new URLSearchParams()
        query.append("query", this.query)
        let {
          data: rsp
        } = await this.$http.post("/aj-item/toQuery", query)
        this.searchList = rsp
        this.num = 1
        this.pagehomeOrshow=1
        if (this.query == "") {
          this.getLeft()
          this.getlist()
          this.abc()
          this.hot()
          this.showNumAndPrice()
          this.showUsername()
          this.num = 0
        }
      }
    }
  }
</script>

<style>
  .el-dropdown-link {
    cursor: pointer;
    color: #409EFF;
  }

  .el-icon-arrow-down {
    font-size: 12px;
  }

  .pnt {
    width: 980px;
    margin: 0 auto;
    overflow: hidden;
  }

  .pntLeft {
    width: 210px;
    border: #7BC144 3px solid;
    float: left;
  }

  .pntRight {
    position: relative;
    width: 756px;
    float: right;
  }

  div {
    display: block;
  }

  .main {
    width: 980px;
    margin: 0 auto;
  }

  .topRight {
    position: absolute;
    top: 0;
    right: 0;
    color: #747474;
  }

  .top {
    height: 25px;
    line-height: 25px;
    position: relative;
    background-color: #f0efef;
  }

  .lsg {
    padding: 5px 0;
    position: relative;
  }

  .logo {
    width: 217px;
    height: 90px;
  }

  h1 {
    display: block;
    font-size: 2em;
    margin-block-start: 0.67em;
    margin-block-end: 0.67em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    font-weight: bold;
  }

  .subBox {
    width: 389px;
    height: 34px;
    position: absolute;
    left: 350px;
    top: 35px;
  }

  .gouwuche {
    width: 220px;
    position: absolute;
    right: 0;
    top: 35px;
  }

  .one {
    border: 1px solid #00CC00;
    cursor: pointer;
    padding: 10px;
    position: relative;
  }

  .two {
    width: 100%;
    position: absolute;
    top: 0;
    left: 98%;
    z-index: 5;
  }

  .two_s {
    width: 100%;
    height: auto;
    padding: 10px;
    border: 1px solid #00CC33;
    background-color: white;
  }

  .three {
    width: 100%;
    padding: 10px;
    box-sizing: border-box;
    border-bottom: 1px solid #00CC00;
    background-color: white;
  }

  .nav {
    height: 30px;
    line-height: 30px;
    padding-top: 5px;
    border-bottom: #7BC144 2px solid;
    position: relative;
    font-family: "微软雅黑";
    font-size: 22px;
  }

  * {
    margin: 0px;
    padding: 0px;
  }

  .el-carousel__item h3 {
    color: #475669;
    font-size: 18px;
    opacity: 0.75;
    line-height: 300px;
    margin: 0;
  }

  .el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
  }

  .el-carousel__item:nth-child(2n+1) {
    background-color: #d3dce6;
  }

  #lb {
    width: 756px;
    float: left;
  }

  #pagehome {
    width: 980px;
    margin: 0 auto;
    text-align: center;
  }
  .tltleS{
    padding-bottom: 2px;
    border-bottom: 2px solid red;
    color: #0077AA;
    font-size: 20px;
    cursor: pointer;
  }
  .titlef{
    border: 0;
    color: #848484;
    font-size: 20px;
    cursor: pointer;
  }

  .flex {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }
  .tltleFU{
    width: 180px;
    margin: 0 auto;
    display: flex;
   justify-content: space-between;
  }

  .imageFlex {
    width: 30%;
    border: 1px solid #b0b0b0;
    padding: 10px;
    box-sizing: border-box;
    margin-top: 20px;
    border-radius: 15px;
  }

  .imageFlex>img {
    width: 100% !important;
    height: auto;
  }

  .flex:after {
    content: "";
    width: 30%;
    height: 10px;
  }

  #pagehome2 {
    margin-top: 900px;
    margin-left: 420px;
  }

  ul li {
    list-style: none;
  }

  .com {
    vertical-align: top;
  }

  .com table {
    float: left;
    margin: 38px;
  }

  .com img {
    width: 18.125rem;
    height: 18rem;
  }

  .com p {
    float: right;
  }
  #flexText{
    width: 100%;
    overflow: hidden;
  }
  #flexText span:nth-child(1){
    float: left;
  }
  #flexText span:nth-child(2){
    float: right;
    color: red;
  }

  #ss img {
    left: 150px;
    top: 150px;
    width: 3.125rem;
    height: 3.125rem;
    border: 1px solid red ;
    border-radius: 5px;
  }
</style>
